<%@ taglib prefix="security"
           uri="http://www.springframework.org/security/tags"%>
<head>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
    <script type="text/javascript"
            src="<%=request.getContextPath()%>/script/hover_button.js"></script>
    <script type="text/javascript"
            src="<%=request.getContextPath()%>/script/listquestion.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            sort();
            initDisplayMode();
        });
    </script>
</head>

<!-- Menu -->
<jsp:include page="menu.jsp" />
<!--START: conent -->
<div class="content">
    <div class="insider">
        <div class="search_box">
            <form id="search" action="search.html">               
                <ul class="fl">
                    <li>
                        <select name="availability" id ="availability">
                            <option value="">
                                Availability:All
                            </option>
                            <c:forEach var="avail" items="${availabilities}">
                                <option value="${avail.code}"
                                        <c:if test="${avail.code eq selectedAvail}">selected</c:if>>
                                    ${avail.code}
                                </option>
                            </c:forEach>
                        </select>
                    </li>
                    <li>
                        <select name="user" id="User">
                            <option value="">
                                User:All
                            </option>
                            <c:forEach var="user" items="${users}">
                                <option value="${user.username}"
                                        <c:if test="${user.username eq selectedUser}">selected</c:if>>
                                    ${user.username}
                                </option>
                            </c:forEach>
                        </select>
                    </li>
                    <li></li>
                    <li></li>
                    <li>
                        <select name="status" id="Status" class="select1">
                            <option value="">
                                Status:All
                            </option>
                            <c:forEach var="sta" items="${status}">
                                <option value="${sta.code}"
                                        <c:if test="${sta.code eq selectedStatus}">selected</c:if>>
                                    ${sta.code}
                                </option>
                            </c:forEach>
                        </select>
                    </li>
                    <li>
                        <select name="group" id="Group" class="select1">
                            <option value="">
                                Group:All
                            </option>
                            <c:forEach var="group" items="${groups}">
                                <option value="${group.name}"
                                        <c:if test="${group.name eq selectedGroup}">selected</c:if>>
                                    ${group.name}
                                </option>
                            </c:forEach>
                        </select>
                    </li>
                    <li class="word_box">
                        <input name="keyword" type="text" id="keyword"
                               value="${empty keyword ? 'Search by Keywords...' : keyword}" maxlength="255"/>
                    </li>
                </ul>
                <ul class="fr">
                    <li>
                        <input type="image" class="btn" name="search_bt" id="search_bt"
                               src="<%=request.getContextPath()%>/images/btn/btn_search3.gif" class="btn"/>
                    </li>
                </ul>
            </form>
        </div>
        <div class="error">
            <h3>
                ${questionerror}<br>
                ${questionmessage}
                <style> p { margin:0px }</style>
                <font color="red">
                    <p id="Msg_retire" style="display:none;">${Msg_retire}</p>
                    <p id="Msg_lock" style="display:none;">${Msg_lock}</p>
                </font>
            </h3>
            <div class="display_mode">
                <h4>
                    Display mode:
                </h4>
                <ul>
                    <li id="brief" onclick="briefMode();">
                        <a href="#">Brief</a>
                    </li>
                    <li class="active" id="full" onclick="fullMode();">
                        <a href="#">Full</a>
                    </li>
                </ul>
            </div>
        </div>
        <ul class="functions2">
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                <li class="fr">
                    <a href="create.html" class="retire"><img
                            src="<%=request.getContextPath()%>/images/btn/btn_create_new.gif"
                            width="127" height="21" alt="Create new Question" class="btn" />
                    </a>
                </li>
            </security:authorize>
            <li class="view">
                <a href="#" id="viewquestion"><img
                        src="<%=request.getContextPath()%>/images/btn/functions2/btn_view.gif"
                        width="68" height="23" alt="view question" class="btn" />
                </a>
            </li>
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                <li>
                    <a href="#" id="editquestion"><img
                            src="<%=request.getContextPath()%>/images/btn/functions2/btn_edit.gif"
                            width="69" height="23" alt="edit question" class="btn" />
                    </a>
                </li>
                <li>
                    <a href="#" id="newversionquestion"><img
                            src="<%=request.getContextPath()%>/images/btn/functions2/btn_new_version.gif"
                            width="142" height="23" alt="new version question" class="btn" />
                    </a>
                </li>
                <li>
                    <a href="#" id="deletequestion"><img
                            src="<%=request.getContextPath()%>/images/btn/functions2/btn_delete.gif"
                            width="86" height="23" alt="delete question" class="btn" />
                    </a>
                </li>
                <li>
                    <a href="#" id="copyquestion"><img
                            src="<%=request.getContextPath()%>/images/btn/functions2/btn_copy.gif"
                            width="68" height="23" alt="copy question" class="btn" />
                    </a>
                </li>
            </security:authorize>
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_REVIEWER">
                <li>
                    <a href="#" id="retirequestion" class="retire"><img
                            src="<%=request.getContextPath()%>/images/btn/functions2/btn_retire.gif"
                            width="86" height="23" alt="retire question" class="btn" />
                    </a>
                </li>
            </security:authorize>
        </ul>
        <table width="100%" cellspacing="0" class="data_thead">
            <thead>
                <tr>
                	<th width="15%" column="name" class="${(column == 'name' and order=='asc')?'id_move_up' : (column == 'name' and order=='desc')?'id':''} sort">
                        Name
                    </th>
                    <th width="11%" column="refId" class="${(column == 'refId' and order=='asc')?'id_move_up' : (column == 'refId' and order=='desc')?'id':''} sort">
                        ID
                    </th>
                    <th width="10%" column="version" class="${(column == 'version' and order=='asc')?'id_move_up' : (column == 'version' and order=='desc')?'id':''} sort">
                        Version
                    </th>
                    <th width="9%" column="questionStatusType.code" class="${(column == 'questionStatusType.code' and order=='asc')?'id_move_up' : (column == 'questionStatusType.code' and order=='desc')?'id':''} sort">
                        Status
                    </th>
                    <th width="13%" column="questionAvailabilityType.code" class="${(column == 'questionAvailabilityType.code' and order=='asc')?'id_move_up' : (column == 'questionAvailabilityType.code' and order=='desc')?'id':''} sort">
                        Availability
                    </th>
                    <th width="42%" column="text" class="${(column == 'text' and order=='asc')?'id_move_up' : (column == 'text' and order=='desc')?'id':''} end sort">
                        Question Text
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="data_tbody" id="dataList">
            <c:forEach var="question" items="${questions}">
                <div onclick="Active(this,${question.questionId},'${question.questionStatusType.code}','${question.questionAvailabilityType.code}')" onmouseover="itemHover(this);" onmouseout="itemMouseOut(this);" id="${question.questionId}">
                    <table width="100%" cellspacing="0" class="data_tbody_title">
                        <tbody>
                            <tr>
                             	<td width="15%" class="id_number">
                                    ${question.name}
                                </td>
                                <td width="11%" class="id_number">
                                    ${question.refId}
                                </td>
                                <td width="10%">
                                    ${question.version}
                                </td>
                                <td width="9%">
                                    ${question.questionStatusType.code}
                                </td>
                                <td width="13%">
                                    ${question.questionAvailabilityType.code}
                                </td>
                                <td width="42%">
                                    ${question.listmodeText}
                                </td>
                            </tr>
                            <tr>
                                <td colspan="5" class="tro"></td>
                            </tr>
                        </tbody>
                    </table>
                    <table border="0" cellspacing="0" class="tro" width="800">
                        <tr>
                            <td width="280">
                                User:
                                <strong> ${question.modifiedBy.username}</strong>
                            </td>
                            <td width="220">
                                Last modified:
                                <strong><fmt:formatDate value="${question.modifiedOn}"
                                                            type="date" pattern="MM/dd/yyyy" />
                                </strong>
                            </td>
                            <td width="300" class="end">
                                Name:
                                <strong>${question.name}</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Resp Type:
                                <strong>
                                    <c:if test="${question.responseType.dynamic==true}">
                                        Dynamic
                                    </c:if>
                                    <c:if test="${question.responseType.dynamic==false}">
                                        Custom
                                    </c:if>
                                ${question.responseType.name}</strong>
                            </td>
                            <td>
                                <strong>${question.listmodeDescription}</strong>
                            </td>
                             <td class="end">
                                Vocabulary Name:
                                <strong>${question.name}</strong>
                            </td>
                        </tr>
                    </table>
                </div>
            </c:forEach>
        </div>
        <!-- Pagination -->
        <%@include file="../../template/pager.jsp" %>
    </div>
</div>
<!--END: conent -->